<template>
  <div>
  <div>
    <el-input placeholder="档案号/姓名" prefix-icon="el-icon-search" v-model="search" style="width: 300px;"></el-input>
    <el-button type="primary" icon="el-icon-search" @click="queryByIdOrName(search)">搜索</el-button><br>
    <el-button type="warning" icon="el-icon-plus" @click="showAddModal">新增</el-button>
    <!-- 模态框 -->
    <el-dialog title="添加" :visible.sync="addModalVisible" style="padding-left: 150px;height: 99%" width="70%">
      <!-- 添加数据的表单或内容 -->
      <el-form :model="formData"  label-width="90px">
        <el-la>档案号:</el-la><input type="number" v-model="formData.fileNumber"/>
        <el-la>名称:</el-la><input type="text" v-model="formData.name"/>
        <el-la>年龄:</el-la><input type="number" v-model="formData.age" />
        <el-la>性别:</el-la>
        <select v-model="formData.sex"><option value="" >--请选择--</option><option value="男">男</option><option value="女">女</option></select>
        <hr color="black">
        <p>请根据近一年的感觉，回答以下问题</p>
        <p>1.您容易失眠吗？<span style="width: 300px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz1" name="zz1" value="5">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz1" name="zz1" value="4">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz1" name="zz1" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz1" name="zz1" value="2">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz1" name="zz1" value="1">总是(非常)
        </p><p></p>
        <p>2.您容易心慌吗？<span style="width: 300px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz2" name="zz2" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz2" name="zz2" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz2" name="zz2" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz2" name="zz2" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz2" name="zz2" value="5">总是(非常)
        </p><p></p>
        <p>3.您感到怕冷、衣服比别人穿得多吗？<span style="width: 174px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz3" name="zz3" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz3" name="zz3" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz3" name="zz3" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz3" name="zz3" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz3" name="zz3" value="5">总是(非常)
        </p><p></p>
        <p>4.您感到手脚心发热吗？<span style="width: 259px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz4" name="zz4" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz4" name="zz4" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz4" name="zz4" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz4" name="zz4" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz4" name="zz4" value="5">总是(非常)
        </p><p></p>
        <p>5.您感到胸闷或腹部胀满吗?<span style="width: 239px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz5" name="zz5" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz5" name="zz5" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz5" name="zz5" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz5" name="zz5" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz5" name="zz5" value="5">总是(非常)
        </p><p></p>
        <p>6.您面部或鼻部有油腻感或者油亮发光吗？<span style="width: 150px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz6" name="zz6" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz6" name="zz6" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz6" name="zz6" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz6" name="zz6" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz6" name="zz6" value="5">总是(非常)
        </p><p></p>
        <p>7.您的两颧部有细微血丝吗？<span style="width: 235px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz7" name="zz7" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz7" name="zz7" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz7" name="zz7" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz7" name="zz7" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz7" name="zz7" value="5">总是(非常)
        </p><p></p>
        <p>8.您多愁善感，感情脆弱吗？<span style="width: 235px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz8" name="zz8" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz8" name="zz8" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz8" name="zz8" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz8" name="zz8" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz8" name="zz8" value="5">总是(非常)
        </p><p></p>
        <p>9.您的皮肤一抓就红，并出现抓痕吗？<span style="width: 180px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz9" name="zz9" value="1">没有(根本不)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz9" name="zz9" value="2">很少(有一点)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz9" name="zz9" value="3">有时(有些)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz9" name="zz9" value="4">经常(相当)<span style="width: 20px; display: inline-block"> </span>
          <input type="radio" v-model="formData.zz9" name="zz9" value="5">总是(非常)
        </p>
      </el-form>
      <!-- 模态框中的按钮，如确定和取消 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addModalVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAdd">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="addModal2Visible" style="padding-left: 150px;height: 99%" width="70%">
        <h2>查看</h2>
          <el-form :model="formData" label-width="90px" readonly>
            <el-la>档案号:</el-la><input type="number" v-model="formData.fileNumber" readonly />
            <el-la>姓名:</el-la><input type="text" v-model="formData.name" readonly />
            <el-la>年龄:</el-la><input type="number" v-model="formData.age" readonly />
            <el-la>性别:</el-la>
              <select v-model="formData.sex" disabled="disabled">
                <option value="">--请选择--</option>
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            <hr color="black">
            <p>请根据近一年的感觉，回答以下问题</p>
            <p>1.您容易失眠吗？<span style="width: 300px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz1" name="zz1" value="5" disabled />没有(根本不)
            <span style="width: 15px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz1" name="zz1" value="4" disabled />很少(有一点)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz1" name="zz1" value="3" disabled />有时(有些)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz1" name="zz1" value="2" disabled />经常(相当)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz1" name="zz1" value="1" disabled />总是(非常)
            </p>
            <p>
            2.您容易心慌吗？
            <span style="width: 296px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz2" name="zz2" value="1" disabled />没有(根本不)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz2" name="zz2" value="2" disabled />很少(有一点)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz2" name="zz2" value="3" disabled />有时(有些)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz2" name="zz2" value="4" disabled />经常(相当)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz2" name="zz2" value="5" disabled />总是(非常)
            </p>
            <p>
            3.您感到怕冷、衣服比别人穿得多吗？
            <span style="width: 170px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz3" name="zz3" value="1" disabled />没有(根本不)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz3" name="zz3" value="2" disabled />很少(有一点)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz3" name="zz3" value="3" disabled />有时(有些)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz3" name="zz3" value="4" disabled />经常(相当)
            <span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz3" name="zz3" value="5" disabled />总是(非常)
            </p>
            <p>
            4.您感到手脚心发热吗？<span style="width: 259px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz4" name="zz4" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz4" name="zz4" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz4" name="zz4" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz4" name="zz4" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz4" name="zz4" value="5" disabled>总是(非常)
            </p><p></p>
            <p>
            5.您感到胸闷或腹部胀满吗?<span style="width: 239px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz5" name="zz5" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz5" name="zz5" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz5" name="zz5" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz5" name="zz5" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
            <input type="radio" v-model="formData.zz5" name="zz5" value="5" disabled>总是(非常)
            </p><p></p>
            <p>6.您面部或鼻部有油腻感或者油亮发光吗？<span style="width: 150px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz6" name="zz6" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz6" name="zz6" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz6" name="zz6" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz6" name="zz6" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz6" name="zz6" value="5" disabled>总是(非常)
            </p><p></p>
            <p>7.您的两颧部有细微血丝吗？<span style="width: 235px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz7" name="zz7" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz7" name="zz7" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz7" name="zz7" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz7" name="zz7" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz7" name="zz7" value="5" disabled>总是(非常)
            </p><p></p>
            <p>8.您多愁善感，感情脆弱吗？<span style="width: 235px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz8" name="zz8" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz8" name="zz8" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz8" name="zz8" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz8" name="zz8" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz8" name="zz8" value="5" disabled>总是(非常)
            </p><p></p>
            <p>9.您的皮肤一抓就红，并出现抓痕吗？<span style="width: 180px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz9" name="zz9" value="1" disabled>没有(根本不)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz9" name="zz9" value="2" disabled>很少(有一点)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz9" name="zz9" value="3" disabled>有时(有些)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz9" name="zz9" value="4" disabled>经常(相当)<span style="width: 20px; display: inline-block"> </span>
              <input type="radio" v-model="formData.zz9" name="zz9" value="5" disabled>总是(非常)
            </p>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleQuery">关闭</el-button>
      </span>
    </el-dialog>
  </div>

  <div class="app-container">
    <el-table :data="tabData.slice((currenPage-1)*pageSize,currenPage*pageSize)">
      <el-table-column fixed align="center" prop="fileNumber" label="档案号">
      </el-table-column>
      <el-table-column fixed label="姓名" prop="name">
      </el-table-column>
      <el-table-column fixed label="评估日期" prop="testTime" align="center">
      </el-table-column>
      <el-table-column fixed label="平和质" align="center">
        <template v-slot="scope">
          {{scope.row.zz1<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed  label="气虚质" align="center">
        <template v-slot="scope">
          {{scope.row.zz2<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed align="center" label="阳虚质">
        <template v-slot="scope">
          {{scope.row.zz3<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="阴虚质" align="center">
        <template v-slot="scope">
          {{scope.row.zz4<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="痰湿质" align="center">
        <template v-slot="scope">
          {{scope.row.zz5<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="湿热质" align="center">
        <template v-slot="scope">
          {{scope.row.zz6<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="血瘀质" align="center">
        <template v-slot="scope">
          {{scope.row.zz7<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="气郁质" align="center">
        <template v-slot="scope">
          {{scope.row.zz8<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="特稟质" align="center">
        <template v-slot="scope">
          {{scope.row.zz9<3?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div>
            <el-button type="danger" icon="el-icon-delete" @click="delById(scope.row.id)" size="mini">删除</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="查看报告" align="center">
        <template slot-scope="scope">
          <el-button size="mini" icon="el-icon-view" @click="queryById(scope.row.id)" type="primary">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="cPage"
        :page-sizes="[5, 10]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=tabData.length>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import getters from '@/store/getters';

export default {
  beforeCreate() {
    console.log('beforeCreate: 页面加载前执行方法')
     axios.post("api/PhysiqueEvaluation/query",{"fileNumber": ""}).then(res => {
     console.log(res)
    this.tabData = res.data.data
    console.log(this.tableData.length)
     })
  },
  data() {
    return {
      addModalVisible: false, // 控制模态框显示和隐藏
      addModal2Visible: false,
      formData: { // 表单数据
        id: '',
        fileNumber: '',
        name: '',
        age: '',
        sex: '',
        zz1: '',
        zz2: '',
        zz3: '',
        zz4: '',
        zz5: '',
        zz6: '',
        zz7: '',
        zz8: '',
        zz9: ''
      },
      search: '',
      currenPage:1,
      pageSize:5,
      tabData:[]
    }
  },
  methods:
    {
      referPage(){
        axios.post("api/PhysiqueEvaluation/query",{"fileNumber": ""}).then(res => {
          this.tabData = res.data.data
        })
      },
    // 带条件的分页查询
    queryByIdOrName(search) {
      axios.post("api/PhysiqueEvaluation/query",{"fileNumber": search}).then(res => {
        this.tabData = res.data.data
      })
      this.$message.success('查询成功');
    },
    // 根据编号删除
    delById(id) {
        let bianliang;
        const permissions = getters.permissions(this.$store.state);
        permissions.forEach(permission => {
          const keyword = permission.keyword;
          console.log(keyword)
          if(keyword === "delPhysiqueEvaluation") {
            bianliang=1;
          }
        });
        if(bianliang===1) {
          this.dialogFormVisible=true;
        }else{
          alert("抱歉,您没有这个权限")
          return
        }
      if(confirm("确认要删除此数据吗？")){
        axios.post("api/PhysiqueEvaluation/delete",{"id": id}).then(res => {
          if(res.data.code=='200'){
            this.$message.success('删除成功');
            this.referPage();
          }
        })
      }
    },
    // 根据编号查询
    queryById(id) {
      axios.post("api/PhysiqueEvaluation/queryById",{"id": id}).then(res => {
        this.formData = res.data.data
      })
      this.$message.success('查询成功');
      this.addModal2Visible = true;
    },
    // 隐藏查询的模态框
    handleQuery() {
      this.addModal2Visible = false;
    },
    // 显示添加模态框
    showAddModal() {
        let bianliang;
        const permissions = getters.permissions(this.$store.state);
        permissions.forEach(permission => {
          const keyword = permission.keyword;
          console.log(keyword)
          if(keyword === "addPhysiqueEvaluation") {
            bianliang=1;
          }
        });
        if(bianliang===1) {
          this.dialogFormVisible=true;
        }else{
          alert("抱歉,您没有这个权限")
          return
        }
      //点击按钮前清空内容
      this.formData.fileNumber = '';
      this.formData.name = '';
      this.formData.age = '';
      this.formData.sex = '';
      this.formData.zz1 = '';
      this.formData.zz2 = '';
      this.formData.zz3 = '';
      this.formData.zz4 = '';
      this.formData.zz5 = '';
      this.formData.zz6 = '';
      this.formData.zz7 = '';
      this.formData.zz8 = '';
      this.formData.zz9 = '';
      // 点击添加按钮时，显示模态框
      this.addModalVisible = true;
    },
    // 提交按钮
    handleAdd() {
      if(this.formData.fileNumber==''){
        this.$message.error('档案号不能为空');
        return;
      }
      if(this.formData.name==''){
        this.$message.error('姓名不能为空');
        return;
      }
      if(this.formData.age==''){
        this.$message.error('年龄不能为空');
        return;
      }
      if (this.formData.sex == '') {
        this.$message.error('请选择性别');
        return
      }
      if(this.formData.zz1==''){
        this.$message.error('请选择第一题答案');
        return;
      }
      if(this.formData.zz2==''){
        this.$message.error('请选择第二题答案');
        return;
      }
      if(this.formData.zz3==''){
        this.$message.error('请选择第三题答案');
        return;
      }
      if(this.formData.zz4==''){
        this.$message.error('请选择第四题答案');
        return;
      }
      if(this.formData.zz5==''){
        this.$message.error('请选择第五题答案');
        return;
      }
      if(this.formData.zz6==''){
        this.$message.error('请选择第六题答案');
        return;
      }
      if(this.formData.zz7==''){
        this.$message.error('请选择第七题答案');
        return;
      }
      if(this.formData.zz8==''){
        this.$message.error('请选择第八题答案');
        return;
      }
      if(this.formData.zz9==''){
        this.$message.error('请选择第九题答案');
        return;
      }
      axios.post("api/PhysiqueEvaluation/add",this.formData).then(res => {
        if(res.data.code=='200'){
          this.$message.success('添加成功!')
          this.addModalVisible = false
          this.referPage();
        }
      })
    },
    // 分页条数的变化
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 跳转分页
    handleCurrentChange(val) {
      this.currenPage = val;
    },
    // 指定分页定位
    cPage(val){
      this.currenPage = val;
    }
  }
}
</script>
